import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, ToastAndroid, View } from 'react-native';
import { Button, Snackbar, TextInput } from 'react-native-paper';
import CustomNavigationBar from './CustomNavigationBar';

const Stack = createStackNavigator();

function HomeScreen({navigation}) {
    const [text, setText] = React.useState();
    const [visible, setVisible] = React.useState(false);

    const children = (text)=>{
        setText(text)
    }

    const showToast = () => {
      setVisible(!visible)
    }

    const onDismissSnackBar = () => setVisible(false);

    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
        <Text>子界面传过来的值：{text}</Text>
        <Button mode='contained' onPress={() => navigation.navigate('Details',{id:8023,name:'lz',setText:children})}>Go to Details</Button>
        <Button  icon="camera" mode='outlined' onPress={showToast}>showToast</Button>
        <Snackbar
        visible={visible}
        onDismiss={onDismissSnackBar}
        // action={{
        //   label: 'Undo',
        //   onPress: () => {
        //     // Do something
        //     console.log('close');
        //   },
        // }}
        >
        Hey there! I'm a Snackbar.
      </Snackbar>

      </View>
    );
  }
  
  function DetailsScreen({navigation,route}) {

    const { id, name,setText } = route.params;
    const [inputText, setInputText] = React.useState('');
    

    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>DetailsScreen!</Text>
        <Text>id: {id}</Text>
        <Text>name: {name}</Text>
        <TextInput mode='outlined' label={'name'} style={{width:300}} value={inputText} onChangeText={text => setInputText(text)} />
        <Button mode='contained' onPress={()=>{
            setText(inputText);
            navigation.pop()
            }}>返回</Button>
      </View>
    );
  }


  export default function StackNavigation() {
    return (
      // <NavigationContainer>
        <Stack.Navigator 
        initialRouteName="Home"
        screenOptions={{
            header: (props) => <CustomNavigationBar {...props} />,
          }}
        >
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Details" component={DetailsScreen} />
        </Stack.Navigator>
      //  </NavigationContainer>
    );
  }